import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Column } from '@ant-design/plots';

const TeamColumChart = (prop: any) => {
  const [data, setData] = useState([
    { city: '团队一', type: '论文', value: 14 },
    { city: '团队一', type: '横向项目', value: 8 },
    { city: '团队一', type: '纵向项目', value: 10 },
    { city: '团队一', type: '申请专利', value: 7 },
    { city: '团队一', type: '授权专利', value: 7 },
    { city: '团队一', type: '专著', value: 10 },
    { city: '团队一', type: '奖励', value: 7 },

    { city: '团队二', type: '论文', value: 14 },
    { city: '团队二', type: '横向项目', value: 8 },
    { city: '团队二', type: '纵向项目', value: 10 },
    { city: '团队二', type: '申请专利', value: 7 },
    { city: '团队二', type: '授权专利', value: 7 },
    { city: '团队二', type: '专著', value: 10 },
    { city: '团队二', type: '奖励', value: 7 },

    { city: '团队三', type: '论文', value: 14 },
    { city: '团队三', type: '横向项目', value: 8 },
    { city: '团队三', type: '纵向项目', value: 10 },
    { city: '团队三', type: '申请专利', value: 7 },
    { city: '团队三', type: '授权专利', value: 7 },
    { city: '团队三', type: '专著', value: 10 },
    { city: '团队三', type: '奖励', value: 7 },

    { city: '团队四', type: '论文', value: 14 },
    { city: '团队四', type: '横向项目', value: 8 },
    { city: '团队四', type: '纵向项目', value: 10 },
    { city: '团队四', type: '申请专利', value: 7 },
    { city: '团队四', type: '授权专利', value: 7 },
    { city: '团队四', type: '专著', value: 10 },
    { city: '团队四', type: '奖励', value: 7 },

    { city: '团队五', type: '论文', value: 14 },
    { city: '团队五', type: '横向项目', value: 8 },
    { city: '团队五', type: '纵向项目', value: 10 },
    { city: '团队五', type: '申请专利', value: 7 },
    { city: '团队五', type: '授权专利', value: 7 },
    { city: '团队五', type: '专著', value: 10 },
    { city: '团队五', type: '奖励', value: 7 },
  ]);

  const config = {
    data: prop.data || data,
    xField: prop.xField,
    yField: prop.yField,
    seriesField: prop.seriesField,
    isGroup: 'true',
    columnStyle: {
      radius: [20, 20, 0, 0],
    },
  };

  return <Column {...config} />;
};

export default TeamColumChart;
